<template>
	<div>
		<el-form :disabled="isDisabled" class="dialog-layout" ref="userForm" :rules="rules" :model="state.ruleForm" size="default" label-width="100px">
			<el-row :gutter="35">
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" prop>
					<el-form-item label="接口名称" prop="functionDisplayName">
						<el-input v-model="state.ruleForm.functionDisplayName" placeholder="请输入接口名称" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" prop>
					<el-form-item label="接口路由" prop="functionRoute">
						<el-input v-model="state.ruleForm.functionRoute" placeholder="请输入接口名称" clearable></el-input>
					</el-form-item>
				</el-col>

				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
					<el-form-item label="接口字段" prop="functionList">
						<el-select v-model="state.ruleForm.functionList" multiple placeholder="请选择接口字段" class="w100">
							<el-option v-for="item in state.interfaceList" :key="item.id" :label="item.fieldTitle" :value="item.id" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
					<el-form-item label="接口类型" required>
						<el-select v-model="state.ruleForm.functionType" placeholder="请选择接口类型" class="w100">
							<el-option label="查询接口" :value="0" />
							<el-option label="修改接口" :value="1" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
					<el-form-item label="备注">
						<el-input type="textarea" v-model="state.ruleForm.mark" placeholder="请输入备注" clearable></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<div class="dialog-btn">
			<el-button @click="onCancel" size="default">取 消</el-button>
			<el-button :disabled="isDisabled" type="primary" @click="onSubmit(userForm)" size="default">确 认</el-button>
		</div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { FunctionInfoCreate, FunctionInfoUpdate, UserfieldGetList } from '/@/api/Interface/index';
import { FormInstance, ElMessage } from 'element-plus';
// 定义父组件传过来的值
const props = defineProps({
	editItem: {
		type: Object,
		default: () => {},
	},
	isDisabled: {
		type: Boolean,
		default: false,
	},
});
// 定义子组件向父组件传值/事件
const emit = defineEmits(['close']);

// 定义变量内容
const state = reactive({
	ruleForm: {
		functionDisplayName: '', // 接口名称
		functionRoute: '', // 接口字段
		functionList: [], // 接口字段
		functionType: 0, // 接口类型 0：接口，1：字段
		isModify: 0, // 是否是修改接口 0：查询接口,1：修改接口
		mark: '', //'备注'
		fields: [],
	} as any,
	num: 0,
	interfaceList: [] as any[], // 接口数据
});
onMounted(() => {
	getTableData();
});
// 初始化列表
const getTableData = async () => {
	state.interfaceList = (await UserfieldGetList()).data;
	if (Object.keys(props.editItem).length) {
		for (const key in state.ruleForm) {
			if (props.editItem[key]) state.ruleForm[key] = props.editItem[key];
		}
		if (props.editItem.fields.length) {
			props.editItem.fields.forEach((v: any) => {
				state.ruleForm.functionList.push(v.functionFieldId);
			});
		}
	}
};

// 关闭弹窗
const onCancel = () => {
	emit('close');
};

const rules = reactive({
	functionDisplayName: [{ required: true, message: '请输入接口名称', trigger: ['blur', 'change'] }],
	functionRoute: [{ required: true, message: '请输入接口路由', trigger: ['blur', 'change'] }],
	functionList: [{ required: true, message: '请选择接口字段', trigger: ['blur', 'change'] }],
});
const userForm = ref<FormInstance>();
const onSubmit = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate(async (valid) => {
		if (valid) {
			const params = {
				...state.ruleForm,
			};
			console.log(params);
			params.fields = [];
			if (params.functionList.length > 0) {
				params.functionList.forEach((functionField: any) => {
					params.fields.push({ functionFieldId: functionField });
				});

				const { editItem } = props;
				if (editItem && editItem.fields && editItem.fields.length) {
					params.fields.forEach((field: any) => {
						const matchingField = editItem.fields.find((itemField: any) => itemField.functionFieldId === field.functionFieldId);
						if (matchingField) {
							field.pid = matchingField.pid;
							field.id = matchingField.id;
						}
					});
				}
			}
			delete params.functionList;
			if (Object.keys(props.editItem).length) {
				await FunctionInfoUpdate(params, props.editItem.id);
			} else {
				await FunctionInfoCreate(params);
			}
			ElMessage.success(Object.keys(props.editItem).length ? '修改成功' : '新增成功');
			onCancel();
		}
	});
};
</script>

<style scoped lang="scss">
.title-info {
	font-size: 16px;
	color: #000;
	position: relative;
	&::before {
		content: '';
		position: absolute;
		left: -5px;
		top: 50%;
		transform: translateY(-50%);
		width: 2px;
		height: 14px;
		background: var(--next-bg-menuBar);
	}
}
</style>
